<template>
    <el-row :gutter="10">
        <el-col :xs="12" :sm="8" :md="6" :lg="6" :xl="4" v-for="room in rooms" :key="room.id">
            <el-card shadow="never" :body-style="{padding:'0px'}">
                <div class="room-thumb">
                    <img :src="getLogoImg(room)" class="room-origin">
                    <a @click="jump(room.key)" :style='setBackgroundImage(room.src)'>
                        <img :src="defaultImg" class="image">
                    </a>
                    <span class="room-pop"><i class="fas fa-fire"></i>{{getPop(room.pop)}}</span>
                    <span class="room-owner">{{room.owner}}</span>
                </div>
                <div class="room-info">
                    <p class="room-name">{{room.name}}</p>
                </div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        name: "Rooms",
        props: ['rooms', 'platform'],
        data() {
            return {
                defaultImg: '/img/default.jpg',
            }
        },
        methods: {
            getPop(pop) {
                if (pop>1000){
                    pop = (pop/1000).toFixed(1) + 'k'
                }
                return pop
            },
            setBackgroundImage(src) {
                if (!src) {
                    src = this.defaultImg
                }
                return "background-image: url('" + src + "');background-size:cover;"
            },
            getLogoImg(room) {
                return '/img/' + room.platform + '.png'
            },
            jump(key) {
                let url = '/jump/' + key;
                open(url)
            }
        },
    }
</script>

<style scoped lang="scss">
    .el-col {
        margin-bottom: 10px;
    }

    .room-name {
        text-align: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        padding: 0 auto;
    }

    .room-info {
        span {
            overflow: hidden;
            width: 55%;
            display: inline-block;
            white-space: nowrap;
            text-overflow: ellipsis;
            padding: 0 5px;
            &:last-child {
                text-align: right;
                width: 45%;
            }
        }
    }

    .room-thumb {
        position: relative;
        width: 100%;
        height: 60%;
        overflow: hidden;
        a {
            position: relative;
            display: inline-block;
            transition: all 0.6s;
            &::after {
                content: "";
                border-radius: 5px;
                position: absolute;
                z-index: -1;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                box-shadow: 0 0 50px #0070BF inset;
                opacity: 0;
                transition: all 0.6s;
            }
            &:hover {
                cursor: pointer;
                &::after {
                    opacity: 1;
                    z-index: 1;
                }
            }
        }
        .room-origin {
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;
            width: 50px;
        }
        .image {
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
        }
        span{
            &.room-pop{
                position: absolute;
                top: 0;
                right: 0;
                z-index: 1;
                color: #eee;
                padding: 0 5px;
                background-color: rgba(0,0,0,0.5);
                i{
                    margin-right: 5px;
                    color: #ff5100;
                }
            }
            &.room-owner{
                position: absolute;
                bottom: 0;
                left: 0;
                z-index: 1;
                color: #eee;
                padding: 0 5px;
                background-color: rgba(0,0,0,0.5);
                i{
                    margin-right: 5px;
                    color: #ff5100;
                }
            }
        }
    }
</style>